<template>
  <div class="fullMain" v-if="isShowUpload">
    <!--插入验证提示框-->
    <div v-transfer-dom>
      <alert v-model="isShowAlert"> {{alertText}}</alert>
    </div>
   <div id="upload_dialog" class="upload_dialog_div"> 
      <div class="style_content_div">
        <div class="style_content_upper_div">
          <div class="style_content_file_div">
            <span class="style_file_span"> 文件路径：</span>
            <input class="style_file_content" type="file" name="upload_file" id="upload_file_id" />
          </div>
          <div class="style_content_prog_div">
            <span class="style_prog_span_hit" id="upload_tip_id"> 请选择要上传的文件</span>
            <br>
            <progress class="style_prog_content" id="upload_progress_id" value="0" max="100"></progress> 
          </div>
        </div>
        <div class="style_content_lower_div">
          <span class="style_content_span"  @click="hideUploadDialog()">取消</span>
          <span class="style_content_span"  @click="uploadFileToServer()">确定</span>
        </div>
  	  </div>
   </div>
  </div>
</template>

<script>

  export default {
    name: 'G_groupFile',
    props:{
      isShowUpload:Boolean,
      groupId:Number,
    },
    data() {
      return {    
        alertText: '',
        isShowAlert: false,
      }
    },
    computed:{
      uploadProgress(){
        return document.getElementById("upload_progress_id")
      }
    },
    watch:{
      isShowUpload(val){
        this.$emit('getIsShowUpload',this.isShowUpload)
      }
    },
    methods:{
      showAlert (alertText) {
        this.isShowAlert = true
        this.alertText = alertText
      },
      closeTip () {
        this.isShowAlert = false
        this.alertText = ''
      },
      createHttpRequest(){
        var xmlHttp=null;
        try{
          // Firefox, Opera 8.0+, Safari
          xmlHttp=new XMLHttpRequest();
        }catch (e){
          // Internet Explorer
          try{
            xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
          }catch (e){
            try{
              xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
            }catch (e){
              alert("您的浏览器不支持AJAX！");
            }
          }
        }
        return xmlHttp;
      },
 
      uploadFileToServer(){
        
        var uploadFile = document.getElementById("upload_file_id")
        var uploadTip = document.getElementById("upload_tip_id")
        // var this.uploadProgress = document.getElementById("upload_progress_id");
        var formData = new window.FormData()
        // formData.append("groupFile", uploadFile.files[0])
        formData.append("file", uploadFile.files[0])
        // 所传文件的路径
        if(uploadFile.value==""){
          uploadTip.innerText="请选择一个文件";
        // }else if(uploadFile.files[0].size>1024 &&uploadFile.files[0].size<(40*1024*1024)){ 
        }else if(uploadFile.files[0].size<(40*1024*1024)){ 
          try{
            if(window.FileReader){
              var fReader = new FileReader();
              var xhreq=this.createHttpRequest();
              xhreq.onreadystatechange=function(){
                if(xhreq.readyState==4){
                  if(xhreq.status==200){
                      uploadTip.innerText="文件上传成功";
                      setTimeout(function(){
                      hideUploadDialog()
                    },2000);	//2秒后隐藏
                  }else{
                    uploadTip.innerText="文件上传失败了";
                  }	
                }
              }
              let url = "http://report.wsn2019.club/download/groupFile/upload?groupId=" + this.groupId
              let showFun = this.showAlert("文件上传成功")
              fReader.οnlοad=function(e){
                $.ajax({
                  url:   url,
                  type: "post",
                  data: formData,
                  //上传文件无需缓存
                  cache: false,
                  //用于对data参数进行序列化处理 这里必须false
                  processData: false,
                  //必须
                  contentType: false,
                  dataType: 'json',
                  beforeSend : function(request) {
                    request.setRequestHeader("Authorization", localStorage.getItem('token'))
                  },
                  success: function (response) {
                    if(response.code == 0){
                      uploadTip.innerText= response.message
                    }else if(response.code == 1){
                      showFun
                    }
                    console.log("response:" + response.code)
                  },
                })
              }
              
              fReader.readAsArrayBuffer(uploadFile.files[0]);
              // this.uploadProgress.style.visibility="visible";
              // this.uploadProgress.value = 0;

              fReader.onprogress = function(e){
                // console.log("this.uploadProgress::" + this.uploadProgress);
                // this.uploadProgress.value = e.loaded*100/e.total;
              }
              fReader.οnlοad()
            }
            else{
              uploadTip.innerText="浏览器不支持上传文件";
            }			
          }catch(e){
            console.log(e);
            uploadTip.innerText="文件上传失败";
          }
        }else{
          uploadTip.innerText="文件不符合要求";
        }
      },
      hideUploadDialog(){
        this.isShowUpload = false
        
      },

    },
  }
</script>
<style>
  #content_div{
   	position:absolute;
		left:0px;
		top:0px;
		right:0px;
		bottom:0px;
		text-align:center
  }
  .upload_dialog_div{
  position:fixed;
	left:0px;
	right:0px;
	top:0px;
	bottom:0px;
	overflow:auto; 
	background-color: rgba(60,60,60,0.5);
	z-index:999;
  }
  .style_content_div{
  position:relative;
  margin:auto;
  margin-top:160px;
	width:400px;
	height:160px;
	/* background:#F5F5DC; */
  }
  .style_content_upper_div{
  position:absolute;
  left:0px;
  top:0px;
	width:400px;
	height:100px;
	background:#F5F5DC;
  }
  .style_content_lower_div{
  position:absolute;
  left:0px;
  top:100px;
	width:400px;
	height:60px;
	background:#F5FFDC;
  }
  
  .style_content_file_div{
  position:absolute;
  left:15px;
  top:20px;
	width:380px;
	height:60px;
  }
  .style_file_span{
	  float:left;
	  width:120px;
	  height:36px;
	  font-size:24px;
	  text-align:right;
  }
  .style_file_content{
	  margin-top:5px;
  }
  .style_content_prog_div{
  position:absolute;
  left:18px;
  top:0px;
	width:360px;
	height:40px;
  }
  .style_prog_span_hit{
	  color:#ff0000;
  }
  .style_prog_content{
	  width:360px;
	  visibility:hidden;
  }
  .style_content_span{
    width:200px;
    height:60px;
    line-height:60px;
    display:inline-block;
    float:left;
    font-size:32px;
    text-align:center;
    cursor: pointer;
  }
 
  .style_copyright_a{
	text-decoration:none;
	color:#cc00cc;
  }
</style>
